<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>xxxxx</title>
    <link rel="stylesheet" href="./style.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,900' rel='stylesheet' type='text/css'>
</head>
<body translate="no">
<div class="back"></div>
<div class="registration-form">
    <header>
        <h1>Sign Up</h1>
        <p>Fill in all informations</p>
    </header>
    <form>
        <div class="input-section email-section fold-up">
            <input class="email" type="email" placeholder="ENTER YOUR E-MAIL HERE" autocomplete="off">
            <div class="animated-button"><span class="icon-paper-plane next"><i class="fa fa-envelope-o"></i></span><span class="next-button email" style="cursor: pointer;"><i class="fa fa-arrow-up"></i></span></div>
        </div>
        <div class="input-section password-section fold-up">
            <input class="password" type="password" placeholder="ENTER YOUR PASSWORD HERE">
            <div class="animated-button"><span class="icon-lock next"><i class="fa fa-lock"></i></span><span class="next-button password" style="cursor: pointer;"><i class="fa fa-arrow-up"></i></span></div>
        </div>
        <div class="input-section repeat-password-section fold-up">
            <input class="repeat-password" type="password" placeholder="REPEAT YOUR PASSWORD HERE">
            <div class="animated-button"><span class="icon-repeat-lock next"><i class="fa fa-lock"></i></span><span class="next-button repeat-password" style="cursor: pointer;"><i class="fa fa-paper-plane"></i></span></div>
        </div>
        <div class="success" style="margin-top: 0;">
            <p>ACCOUNT CREATED</p>
        </div>
    </form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script id="rendered-js">
    $('.email').on("change keyup paste",
        function () {
            if ($(this).val()) {
                $('.icon-paper-plane').addClass("next");
            } else {
                $('.icon-paper-plane').removeClass("next");
            }
        });


    $('.next-button').hover(
        function () {
            $(this).css('cursor', 'pointer');
        });


    $('.next-button.email').click(
        function () {
            console.log("Something");
            $('.email-section').addClass("fold-up");
            $('.password-section').removeClass("folded");
        });


    $('.password').on("change keyup paste",
        function () {
            if ($(this).val()) {
                $('.icon-lock').addClass("next");
            } else {
                $('.icon-lock').removeClass("next");
            }
        });


    $('.next-button').hover(
        function () {
            $(this).css('cursor', 'pointer');
        });


    $('.next-button.password').click(
        function () {
            console.log("Something");
            $('.password-section').addClass("fold-up");
            $('.repeat-password-section').removeClass("folded");
        });


    $('.repeat-password').on("change keyup paste",
        function () {
            if ($(this).val()) {
                $('.icon-repeat-lock').addClass("next");
            } else {
                $('.icon-repeat-lock').removeClass("next");
            }
        });


    $('.next-button.repeat-password').click(
        function () {
            console.log("Something");
            $('.repeat-password-section').addClass("fold-up");
            $('.success').css("marginTop", 0);
        });
    //# sourceURL=pen.js
</script>





</body>
<script src="script.js"></script>
</html>